<template>
	<view class="page">
		<u--form errorType="toast" :model="form" ref="myForm" :rules="rules" labelWidth="80">
			<u-form-item label="头像" borderBottom>
				<div class="flex flex justify-end">
					<view>
						<u-upload :fileList="fileList" :maxCount="1" maxSize="204800" @delete="deletePic" @afterRead="afterRead" />
					</view>
				</div>
			</u-form-item>
			<u-form-item label="客户昵称" required prop="nickName" borderBottom>
				<u-input v-model="form.nickName" border="none" placeholder="请输入内容" inputAlign="right" />
			</u-form-item>
			<u-form-item label="手机号码" required prop="mobile" borderBottom>
				<u-input v-model="form.mobile" type="number" border="none" placeholder="请输入内容" inputAlign="right" />
			</u-form-item>
			<u-form-item label="客户性别" prop="sexName" borderBottom>
				<view @click="showSex=true">
					<u-input v-model="form.sexName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				</view>
				<u-icon slot="right" name="arrow-right" @click="showSex=true" />
			</u-form-item>
			<u-form-item label="客户生日" prop="birthday" borderBottom>
				<view @click="showBirthday=true">
					<u-input v-model="form.birthday" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				</view>
				<u-icon slot="right" name="arrow-right" @click="showBirthday=true"/>
			</u-form-item>
			<u-form-item label="推荐人" prop="staffName" borderBottom v-if="store.mainStore===1">
				<view @click="$u.route('/pages/selectPage/staff', {type: 1})">
					<u-input v-model="form.staffName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				</view>
				<u-icon slot="right" name="arrow-right" />
			</u-form-item>
			<u-form-item label="所属门店" prop="storeName" borderBottom v-if="store.mainStore===1">
				<view @click="$u.route('/pages/selectPage/store', {type: '1'})">
					<u-input v-model="form.storeName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				</view>
				<u-icon slot="right" name="arrow-right" />
			</u-form-item>
			<u-form-item label="客户来源" prop="sourceName" borderBottom>
				<view @click="showUserSource=true">
					<u-input v-model="form.sourceName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				</view>
				<u-icon slot="right" name="arrow-right" @click="showUserSource=true"/>
			</u-form-item>
			<u-form-item label="客户分类" prop="userCategoryName" borderBottom @click="$u.route('/pages/customer/categoryList', {type: '2'})">
				<u-input v-model="form.userCategoryName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				<u-icon slot="right" name="arrow-right" />
			</u-form-item>
			<u-form-item label="客户等级" prop="gradeName" borderBottom @click="$u.route('/pages/customer/userGradeList', {type: '2'})">
				<u-input v-model="form.gradeName" border="none" placeholder="请选择" inputAlign="right" disabled disabledColor="#fff" />
				<u-icon slot="right" name="arrow-right" />
			</u-form-item>
			<u-form-item label="客户状态" required prop="statusName" borderBottom>
				<view @click="showUserStatus=true">
					<u-input 
						v-model="form.statusName" 
						type="number" 
						border="none" 
						placeholder="请选择" 
						inputAlign="right" 
						disabled 
						disabledColor="#fff" 
					/>
				</view>
				<u-icon slot="right" name="arrow-right" @click="showUserStatus=true" />
			</u-form-item>
			<u-form-item label="是否共享" required prop="shareFlag">
				<u-switch slot="right" v-model="form.shareFlag" activeColor="#e54d42"></u-switch>
			</u-form-item>
		</u--form>
		<view class="pl-60 pr-60 mt-60">
			<u-button type="error" :text="isEdit?'保存更改':'确定'" @click="submit" size="large" />
		</view>
		<u-action-sheet :show="showSex" :actions="sexTypes" @close="showSex = false" @select="event=>selectData(event, 'sex')" />
		<u-action-sheet :show="showGrade" :actions="userGrade" @close="showGrade = false" @select="event=>selectData(event, 'grade')" />
		<u-action-sheet :show="showUserStatus" :actions="userStatus" @close="showUserStatus = false" @select="event=>selectData(event, 'status')" />
		<u-picker
			:show="showUserSource" 
			:columns="userSourceList"
			keyName="description"
			@cancel="showUserSource = false"
			@confirm="onUserSource" 
		></u-picker>
		<u-datetime-picker 
			mode="date" 
			:show="showBirthday" 
			v-model="date" 
			:minDate="minDate"
			:maxDate="maxDate"
			:closeOnClickOverlay="true"
			@confirm="event=>selectData(event, 'birthday')"
			@cancel="showBirthday=false" 
			@close="showBirthday=false"
		/>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cDate from '@/common/date.js'
	import getDateTime from '@/common/getDataTime.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				date:'',
				showSex: false,
				showGrade: false,
				showUserStatus: false,
				showBirthday: false,
				isEdit: false,
				showUserSource:false,
				sexTypes:[],
				userGrade:[],
				userStatus:[],
				userSourceList:[],
				form: {
					avatarImage: '',
					birthday:'',
					grade:0,
					nickName: '',
					mobile: '',
					sex:2,
					sexName:'女',
					passWord:'',
					sourceName:'不定',
					source:0,
					gradeName:'',
					userCategoryId: 0,
					userCategoryName:'',
					statusName:'正常',
					status:1,
					shareFlag: true,
					storeId: 0,
					storeName:'',
					staffId: 0,
					staffName:''
				},
				minDate:new Date(new Date().getFullYear() - 63, 0, 1).getTime(),
				maxDate:Date.parse(cDate.getDate(0)+'T00:00:00+08:00'),
				fileList: [],
				rules: {
					nickName: [{
						required: true,
						message: '请输入用昵称',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
					}],
					grade: [{
						required: true,
						message: '请设置客户等级',
						trigger: ['blur', 'change']
					}],
					status: [{
						required: true,
						message: '请选择状态',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(opt) {
			if(opt.id){
				this.isEdit = true
				this.getUserInfo(opt.id)
				uni.setNavigationBarTitle({
					title:'客户资料'
				})
			}else {
				this.getUserInfo(0)
			}
			uni.$on('user-category', obj=>{
				this.form.userCategoryId = obj.id
				this.form.userCategoryName = obj.name
			})
			uni.$on('user-grade', obj=>{
				this.form.grade = obj.id
				this.form.gradeName = obj.title
			})
			uni.$on('select-staff', obj=>{
				this.form.staffId = obj.id
				this.form.staffName = obj.nickName
			})
			uni.$on('select-store', obj=>{
				this.form.storeId = obj.id
				this.form.storeName = obj.storeName
			})
			this.date = getDateTime.dateTimeStr('y/m/d')
			this.form.birthday = getDateTime.dateTimeStr('y/m/d')
		},
		onUnload() {
			uni.$off('user-category')
			uni.$off('user-grade')
			uni.$off('select-staff')
			uni.$off('select-store')
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		computed: {
			...mapState(['userInfo', 'store'])
		},
		methods: {
			onUserSource(e){
				this.form.sourceName = e.value[0].description
				this.form.source = e.value[0].value
				this.showUserSource = false
			},
			// 删除头像
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.form.avatarImage = ''
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.form.avatarImage = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			},
			selectData(e, name){
				switch (name){
					case 'grade':
						this.form.grade = e.id
						this.form.gradeName = e.name
						break;
					case 'sex':
						this.form.sex = e.value
						this.form.sexName = e.name
						break;
					case 'status':
						this.form.status = e.value
						this.form.statusName = e.name
						break;
					case 'birthday':
						this.form.birthday = uni.$u.date(e.value, 'yyyy-mm-dd')
						this.showBirthday = false
						break;
				}
			},
			getUserInfo(id) {
				this.$reqJsonPost('CoreCmsUserGetEdit',{id:id}).then(res => {
					if(this.isEdit){
						this.form = res.data.model
						this.form.birthday = res.data.model.birthday?res.data.model.birthday.slice(0, 10):''
						this.fileList = [{ url: res.data.model.avatarImage }]
					}
					if(res.data.userCategory.length > 0){
						const userCategory = res.data.userCategory.find(obj=>obj.id === this.form.userCategoryId)
						this.form.userCategoryName = userCategory?userCategory.name:''
					}
					if(res.data.sexTypes.length > 0){
						this.sexTypes = res.data.sexTypes.map(im=>{
							im.name = im.title
							return im
						})
						const sex = this.sexTypes.find(obj=>obj.value === this.form.sex)
						this.form.sexName = sex?sex.title:''
					}
					if(res.data.userGrade.length > 0){
						this.userGrade = res.data.userGrade.map(im=>{
							im.name = im.title
							return im
						})
						const sty = this.userGrade.find(obj=>obj.id === this.form.grade)
						this.form.gradeName = sty?sty.title:''
					}
					if(res.data.userStatus.length > 0){
						this.userStatus = res.data.userStatus.map(im=>{
							im.name = im.title
							return im
						})
						const sts = this.userStatus.find(obj=>obj.value === this.form.status)
							this.form.statusName = sts?sts.title:''
						}
					if(res.data.userSource.length > 0){
						this.userSourceList= [res.data.userSource]
						const source = res.data.userSource.find(obj => obj.value === this.form.source)
						this.form.sourceName = source?source.description:''
					}
				})
			},
			submit() {
				let that = this
				this.$refs.myForm.validate().then(res => {
					that.$reqJsonPost(that.isEdit?'UserDoEdit':'UserDoCreate', that.form).then(res=>{
						that.$refs.uToast.show({
							message: res.msg,
							complete() {
								uni.$emit('upUserData', {id:that.form.id})
								uni.navigateBack()
							}
						})
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	
</style>
